<!--我对别人的评论-->
<style>
.contain {
  background: #FFFFFF;
  height: 86%;
  overflow: auto;
}

.vux-flexbox-item {
  margin-left: 0px !important;
}

.font-define1 {
  text-align: right;
  margin-right: 10px;
}

.one-row {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>
<template>
  <div class="contain">
    <scroller :on-refresh="refresh" :on-infinite="loadMore" ref="myscroller">
      <div style="margin: 3px;">
        <div style="border-bottom: 1px #CCCCCC solid;" v-for="item in data">
          <flexbox style="margin-bottom: 10px;">
            <flexbox-item :span="1/4">
              <div class="flex-demo">
                <div class="font-define1" style="color: #4ccdf7;">{{item.nickName}}</div>
                <div class="font-define1" style="font-size: 13px;color: #CCCCCC;">{{item.createTime}}</div>
              </div>
            </flexbox-item>
            <flexbox-item :span="3/4">
              <div class="flex-demo" style="text-align: left;">
                <div class="one-row" style="margin-left: 10px;">{{item.comment}}</div>
                <div class="one-row" style="font-size: 5px;
										background: #ECECEC;
										padding: 3px 0px 3px 6px;
										margin-left: 15px;" @click="linkThoughtDetail(item.thoughtId, item.ownId)">{{item.thoughtContent}}</div>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
    </scroller>
  </div>
</template>
<script>
import {
  Flexbox,
  FlexboxItem
} from 'vux'
export default {
  components: {
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      tip: '加载中',
      data: [],
      pageNo: 1
    }
  },
  methods: {
    linkThoughtDetail(thoughtId, ownId) {
      if (ownId == this.userId) {
        //本人
        this.$router.push({
          path: '/tourl/myThoughtDetail',
          query: {
            thoughtId: thoughtId
          }
        })
      } else {
        this.$router.push({
          path: '/tourl/tdetail',
          query: {
            thoughtId: thoughtId,
            detailUserId: ownId
          }
        })
      }
    },
    refresh() {
      setTimeout(() => {
        this.pageNo = 1;
        this.data = [];
        this.load();
        this.$refs.myscroller.finishPullToRefresh()
      }, 1000)
    },
    loadMore() {
      //为了出现加载动作
      setTimeout(() => {
        this.load()
      }, 1000)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/mycomment/queryIToOther.json",
        params: {
          userId: this.userId,
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++
    }
  }
}

</script>
